<template>
  <div class="box">
    <header>
      <van-nav-bar
        title="个人资料"
        right-text="保存"
        left-arrow
        @click-left="$router.go(-1)"
        bind:click-left="onClickLeft"
        bind:click-right="onClickRight"
      />
    </header>
    <div class="content">
      <div class="avatar" @click="avatarChange">
        <van-image
          round
          width=".64rem"
          height=".64rem"
          src="https://img02.hua.com/pc/assets/img/avatar_default_06.jpg"
        />
        <p>点击修改头像</p>
      </div>
      <div class="editInfo">
        <div class="editBar">
          <span>姓名</span>
          <input type="text" placeholder="请填写您的姓名">
        </div>
        <div class="editBar">
          <span>手机</span>
          <span class="flex1">17716151441</span>
          <div class="right">
            <b>已绑定</b>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="editBar">
          <span>邮箱</span>
          <span class="flex1">17716151441@vip.hua.com</span>
          <div class="right">
            <b>去验证</b>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="editBar">
          <span>性别</span>
          <div class="radioBar"><input type="radio" name="" id="sex">&nbsp;&nbsp;&nbsp;&nbsp;男</div>
          <div class="radioBar"><input type="radio" name="" id="sex">&nbsp;&nbsp;&nbsp;&nbsp;女</div>
        </div>
        <div class="editBar">
          <span>生日</span>
          <input type="text" placeholder="选择生日">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, Image, Field } from 'vant'
Vue.use(NavBar) // 注册NavBar组件
Vue.use(Icon) // 注册Icon组件
Vue.use(Image) // 注册Image组件
Vue.use(Field) // 注册Field组件
export default {
  methods: {
    avatarChange () {
    }
  }
}
</script>

<style lang="scss" scoped>
  .avatar{
    text-align: center;
    height: 1.32rem;
    padding-top: .2rem;
    border-bottom: 1px solid  #E9ECF0;
  }

  .editInfo{
    .editBar{
      height: .56rem;
      display: flex;
      padding: 0 .16rem;
      border-bottom: 1px solid  #E9ECF0;
      .flex1{
        flex: 1;
      }
      .right{
        display: flex;
        align-items: center;
        b{
          font-weight: normal;
        }
      }
      span{
        display: block;
        width: .72rem;
        line-height: .56rem;
      }
      input{
        border: none;
      }
      .radioBar{
        display: flex;
        align-items: center;
        flex: 1;
        input{
          margin-right: .08rem;
        }
      }
    }
  }
</style>
